<template>
  <div class="container contract-review mb70">
    <p class="bread">
      <a :href="href" class="font-s-18">{{orderName}}</a> >
      <a href="javascript:void(0);" class="font-s-16">详情</a>
    </p>
    <div class="bg-c-fff box-border">
      <h3 class="tm-title">交易监控订单详情</h3>
      <step :stepData="stepData" :stepNum="stepNum" @stepRouter="stepRouter"></step>
    </div>
    <div class="content bg-c-fff tc">
      <table class="auto" width="700px">
        <tr>
          <td>1.查看待审查合同</td>
          <td>
            <file-num :fileNum="pendingContracts.length"></file-num>
            <button class="blue-button xl-btn-css vb" @click="onCheckPending">查看</button>
          </td>
        </tr>
        <tr>
          <td>2.查看合同审查表</td>
          <td>
            <file-num :fileNum="reviewFormNum"></file-num>
            <div class="dib">
              <div class="lt" v-for="(item, index) in list">
                <button class="blue-button xl-btn-css vb" @click="show(index)">合同审查表{{index + 1}}</button>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>3.查看合同审查报告</td>
          <td>
            <file-num :fileNum="contractReports.length"></file-num>
            <div class="dib btn-box">
              <button class="blue-button xl-btn-css vb" @click="onCheckContractReport">{{examinationBtnText}}</button>
            </div>
          </td>
        </tr>
        <tr>
          <td>4.查看正式合同</td>
          <td>
            <file-num :fileNum="formalNum"></file-num>
            <a class="blue-button xl-btn-css vb" download target="_blank" :href="formalContract" v-show="formalNum">查看</a>
          </td>
        </tr>
      </table>
      <button class="blue-button xl-btn-css" @click="onNextClick">下一步</button>
    </div>
    <vodal :show="showPendingContract" animation="zoom" :width="600" :height="500" @hide="showPendingContract = false">
      <file-browser type="contract" :files="pendingContracts" ref="fileBrowser"></file-browser>
    </vodal>
    <vodal :show="showContractReport" animation="zoom" :width="600" :height="500" @hide="showContractReport = false">
      <file-browser type="contract" :files="contractReports" ref="reportBrowser"></file-browser>
    </vodal>
    <vodal :show="writeShow" animation="zoom" :width="1000" :height="640" @hide="writeShow=false">
      <div class="vodal-main">
        <h4>合同审查表</h4>
        <div class="con">
          <table width="100%">
            <tr>
              <th colspan="4">合同审查表{{index}}</th>
            </tr>
            <tr>
              <td width="100px">序号</td>
              <td width="300px">审查项目</td>
              <td width="500px">具体内容</td>
              <td width="200px">备注</td>
            </tr>
            <tr>
              <td>1</td>
              <td>待审查项目与监控申请单一致性</td>
              <td class="choose-box">
                <input type="radio" name="same" id="same" value="1" v-model="uniformity" disabled>
                <label for="same">一致</label>
                <br>
                <input type="radio" name="same" id="notsame" value="0" v-model="uniformity" disabled>
                <label for="notsame">不一致</label>
              </td>
              <td>
                <textarea v-model="uniformityRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>2</td>
              <td>合同合法性</td>
              <td class="choose-box">
                <input type="radio" name="legal" id="legal" value="1" v-model="legitimacy" disabled>
                <label for="legal">合法</label>
                <br>
                <input type="radio" name="legal" id="notlegal" value="0" v-model="legitimacy" disabled>
                <label for="notlegal">不合法</label>
              </td>
              <td>
                <textarea v-model="legitimacyRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>3</td>
              <td>主要法律法规、条款</td>
              <td class="choose-box">
                <textarea class="tex-css" placeholder="类型" v-model="type" disabled></textarea>
              </td>
              <td>
                <textarea v-model="typeRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>4</td>
              <td>主要条款</td>
              <td class="choose-box">
                <ul>
                  <li>
                    <input type="checkbox" name="" id="theSubject" value="标的" v-model="mainTerms" disabled>
                    <label for="theSubject">标的</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="price" value="价格" v-model="mainTerms" disabled>
                    <label for="price">价格</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="payment" value="支付方式" v-model="mainTerms" disabled>
                    <label for="payment">支付方式</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="transport" value="运输" v-model="mainTerms" disabled>
                    <label for="transport">运输</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="deliver" value="交付" v-model="mainTerms" disabled>
                    <label for="deliver">交付</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="ys" value="验收" v-model="mainTerms" disabled>
                    <label for="ys">验收</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="install" value="安装" v-model="mainTerms" disabled>
                    <label for="install">安装</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="warranty" value="质保" v-model="mainTerms" disabled>
                    <label for="warranty">质保</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="breachOfContract" value="违约" v-model="mainTerms" disabled>
                    <label for="breachOfContract">违约</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="jurisdiction" value="管辖权" v-model="mainTerms" disabled>
                    <label for="jurisdiction">管辖权</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="notification" value="通知送达" v-model="mainTerms" disabled>
                    <label for="notification">通知送达</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="takeEffect" value="生效" v-model="mainTerms" disabled>
                    <label for="takeEffect">生效</label>
                  </li>
                </ul>
              </td>
              <td>
                <textarea v-model="mainRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>5</td>
              <td>具体条款</td>
              <td class="choose-box">
                <input type="checkbox" name="" id="qymqx" value="权益明确性" v-model="specificTerms" disabled>
                <label for="qymqx">权益明确性</label>
                <br>
                <input type="checkbox" name="" id="bsmqx" value="表述确定性" v-model="specificTerms" disabled>
                <label for="bsmqx">表述精确性</label>
              </td>
              <td>
                <textarea v-model="specificRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>6</td>
              <td>资质审查中问题的对策</td>
              <td class="choose-box">
                <input type="radio" name="" id="y" value="1" v-model="countermeasure" disabled>
                <label for="y">有</label>
                <br>
                <input type="radio" name="" id="w" value="0" v-model="countermeasure" disabled>
                <label for="w">无</label>
              </td>
              <td>
                <textarea v-model="countermeasureRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import {
  swiper,
  swiperSlide
} from 'vue-awesome-swiper'
import Step from '../components/Step'
import FileNum from '../components/FileNum'
import FileBrowser from '../components/FileBrowser'
export default {
  components: {
    swiper,
    swiperSlide,
    Step,
    FileNum,
    FileBrowser
  },
  data() {
    return {
      stepNum: 1,
      stepData: [{
        name: '查看资质审查报告'
      }, {
        name: '查看审查合同'
      }, {
        name: '监控师绘制流程图'
      }, {
        name: '监控员交易监控'
      }],
      reviewFormNum: 0,
      formalNum: 0,
      writeShow: false,
      pendingContracts: [],
      contractReports: [],
      showPendingContract: false,
      showContractReport: false,
      formalContract: false,
      uniformity: '',
      uniformityRemarks: '',
      legitimacyRemarks: '',
      legitimacy: '',
      type: '',
      typeRemarks: '',
      mainTerms: [],
      mainRemarks: '',
      specificRemarks: '',
      specificTerms: [],
      countermeasure: '',
      countermeasureRemarks: '',
      index: '',
      list: [],
      orderName: '',
      href: '',
      status: ''
    }
  },
  mounted() {
    this.getData()
    if (this.$route.query.type === 'business') {
      this.orderName = '业务管理部-交易监控订单管理'
      this.href = '#/index/transaction-order-manage'
    } else if (this.$route.query.type === 'chief') {
      this.orderName = '首席监控师-交易监控订单管理'
      this.href = '#/index/cm-transaction-list'
    } else if (this.$route.query.type === 'businessNotice') {
      this.orderName = '业务管理部-交易监控通知'
      this.href = '#/index/transaction-notice'
    }
  },
  watch: {
    writeShow(newVal, oldVal) {
      if (!newVal) {
        this.empty()
        this.isDisabled = false
      }
    }
  },
  computed: {
    examinationBtnText() {
      if (this.contractReports.length) {
        return '查看'
      } else {
        return '未上传'
      }
    },
    formalBtnText() {
      if (this.contractReports.length) {
        return '查看'
      } else {
        return '未上传'
      }
    }
  },
  methods: {
    onCheckContractReport() {
      if (this.contractReports.length) {
        this.showContractReport = true
        this.$nextTick(() => {
          this.$refs.reportBrowser.update()
        })
      } else {
        this.$toasted.show('暂无合同审查报告')
      }
    },
    onCheckPending() {
      if (this.pendingContracts.length === 0) {
        this.$toasted.show('暂无待审查合同')
        return
      }
      this.showPendingContract = true
      this.$nextTick(() => {
        this.$refs.fileBrowser.update()
      })
    },
    getData() {
      this.$http.post('/transactionMonitorSer/sys/read/detail', {
        id: this.$route.query.id
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.status = data.data.data.status
          if (data.data.data.pendingContracts) {
            this.pendingContracts = data.data.data.pendingContracts
          }
          if (data.data.data.contractReports) {
            this.contractReports = data.data.data.contractReports
          }
          if (data.data.data.contracts) {
            this.formalContract = data.data.data.contracts.address
            this.formalNum = 1
          }
          this.list = data.data.data.contractReviews
          this.reviewFormNum = data.data.data.contractReviews.length
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络错误')
      })
    },
    show(i) {
      this.writeShow = true
      this.isDisabled = true
      this.uniformity = this.list[i].uniformity
      this.uniformityRemarks = this.list[i].uRemark
      this.legitimacy = this.list[i].validity
      this.legitimacyRemarks = this.list[i].vRemark
      this.type = this.list[i].lawsAndRegulations
      this.typeRemarks = this.list[i].lRemark
      this.mainTerms = this.list[i].mainTerms.split(',')
      this.mainRemarks = this.list[i].mRemark
      this.specificTerms = this.list[i].specificTerms.split(',')
      this.specificRemarks = this.list[i].sRemark
      this.countermeasure = this.list[i].hasMethod
      this.countermeasureRemarks = this.list[i].hRemark
      this.index = i + 1
    },
    empty() {
      this.uniformity = ''
      this.uniformityRemarks = ''
      this.legitimacy = ''
      this.legitimacyRemarks = ''
      this.type = ''
      this.typeRemarks = ''
      this.mainTerms = []
      this.mainRemarks = ''
      this.specificTerms = []
      this.specificRemarks = ''
      this.countermeasure = ''
      this.countermeasureRemarks = ''
      this.index = ''
    },
    onNextClick() {
      if (this.status >= 4) {
        this.$router.push('/cm-transaction-drawing?type=' + this.$route.query.type + '&id=' + this.$route.query.id)
      } else {
        this.$toasted.show('此订单还没有进行到下一步')
      }
    },
    stepRouter(i, name) {
      if (i === 0 && this.status >= 2) {
        this.$router.push('/cm-transaction-aptitude?type=' + this.$route.query.type + '&id=' + this.$route.query.id)
      }
      if (i === 1 && this.status >= 3) {
        this.$router.push('/cm-transaction-contract?type=' + this.$route.query.type + '&id=' + this.$route.query.id)
      }
      if (i === 2 && this.status >= 4) {
        this.$router.push('/cm-transaction-drawing?type=' + this.$route.query.type + '&id=' + this.$route.query.id)
      }
      if (i === 3 && this.status >= 5) {
        this.$router.push('/cm-transaction-flow?type=' + this.$route.query.type + '&id=' + this.$route.query.id)
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.content {
  padding: 30px 0;
  margin-top: 20px;
}


.content button {
  margin-top: 40px;
}

.content table button {
  margin-left: 20px;
}

table,
td,
th {
  border: 1px solid #ddd;
  background-color: #fff;
  color: #333;
  /*line-height: 30px;*/
}

table {
  border-collapse: collapse;
}

table td.choose-box {
  text-align: left;
  padding-left: 35px;
}

table td.choose-box li {
  margin: 2px;
  display: inline-block;
  width: 78px;
  padding: 0;
}

table input[type="text"] {
  width: 330px;
}

.slider {
  width: 85%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 350px;
  margin: 28px auto;
}

table td .btn-box button {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

.lt {
  float: left;
}

textarea {
  padding: 6px;
  height: 50px;
}

.tex-css {
  width: 310px;
  height: 70px;
}

.vb {
    margin-left: 20px;
}

</style>
